<template>

    用户名：<input type="text" v-model="name"/>

    <input type="button" value="查询" @click="Show"/>

    <table border="1">
        <thead>
            <tr>
                <td>用户名</td>
                <td>密码</td>
                <td>邮箱</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in member">
                <td>{{item.Name}}</td>
                <td>{{item.Pwd}}</td>
                <td>{{item.Email}}</td>
                <td>{{item.Age}}</td>
                <td>{{item.Sex==true?"男":"女"}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import {onMounted,ref} from 'vue'
import axios from 'axios'

//创建生命周期钩子函数
onMounted(()=>{
    Show();
})

//声明参数来查询
const name=ref("");

const member=ref([{
    Name:"",
    Pwd:"",
    Email:"",
    Age:0,
    Sex:true
}])


//保存显示查询方法
const Show=()=>{
    axios.get("https://localhost:7176/api/Member/ShowMember",{
        params:{
            name:name.value
        }
    })
    .then(res=>{
       member.value=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>